
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo.css">
	<script src="http://s1.bdstatic.com/r/www/cache/ecom/esl/1-6-10/esl.js"></script>
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
    <style>
		.icon-trace {background: url('../img/_0003_导出列表.png') no-repeat center center;}
		.icon-playback {background: url('../img/_0009_详细.png') no-repeat center center;}
		/*.icon-detail{background: url('../img/_0004_导出详细.png') no-repeat center center;}*/
	</style>
</head>
<body >	
      
	 <div style="width:1195px;height:200px">
        <table id="dg" class="easyui-datagrid" title="" style="width:1195px;height:200px"
        data-options="rownumbers:true,singleSelect:true,selectOnCheck:false,checkOnSelect:false,toolbar:toolbar">
		<thead>
			<tr>
				<th data-options="field:'licenseNumber',width:120">车牌号</th>
				<th data-options="field:'customer',width:150">客户名称</th>
				<th data-options="field:'ModelName',width:150">车型</th>
			    <th data-options="field:'d_esn',width:150,hidden:false">终端号</th>
				<th data-options="field:'sum_distance',width:150,hidden:false">总里程(km)</th>
				<th data-options="field:'sum_fuel_consumption',width:150,hidden:false">总油耗(L)</th>
				<th data-options="field:'max_speed',width:120,hidden:false">最高速度(km/h)</th>
				<th data-options="field:'afc',width:120,hidden:false">平均油耗(L/100km)</th>
				<th data-options="field:'deviceID',width:0,hidden:true">deviceID</th>
			</tr>
		</thead>
	</table>
	</div>
	<div id="margin" style="float:left;width:1195px;height:15px" ></div>
	<div id="main" style="width:100%;height:300px" ></div>
	
              
	<script type="text/javascript">
	var glob_rows;
	var toolbar = [{
		text:'excel导出',
		iconCls:'icon-trace',
		handler:function(){	
			  var url='../smarty/demo/monthly_excel.php?startDate='+glob_startDate+'&stopDate='+glob_stopDate+'&devices='+glob_deviceIDs;
		   //     alert(url);
		         window.open(url,"_blank");
			    }
				
	}
//	,{
//		text:'详细',
//		iconCls:'icon-playback',
//		handler:function(){
//			var selectRow=$('#dg').datagrid('getSelected');
//			if(selectRow==null){
//				alert("请单击车辆进行选择（最多1辆）！");
//				return;
//			}
////			getData(selectRow.deviceID,selectRow.sum_distance,selectRow.sum_fuel_consumption,selectRow.licenseNumber);
//		}
//	}
	];
	
	var  glob_startDate;
	var  glob_stopDate;
	var  glob_deviceIDs;
	 function dailySearch(deviceArr,startDate,stopDate){
		// alert("month::::"+deviceArr[0]+" "+startDate+" "+stopDate);
		 glob_startDate=startDate;
		 glob_stopDate=stopDate;
		 deviceIDs=deviceArr.join(",");
		 glob_deviceIDs=deviceIDs;
		 url='../service/tj_daily.php?opType=0&startDate='+startDate+'&stopDate='+stopDate+'&devices='+deviceIDs;
	//	 alert(url);
		 $('#dg').datagrid({   
			 url:url
					 }
		 );
	  }
	 
	 
	 
	 
	 $('#dg').datagrid({
		 onLoadSuccess: function (data) {
			if (data.rows.length == 0) {
		//	 var body = $(this).data().datagrid.dc.body2;
		//	 body.find('table tbody').append('<tr><td width="' + body.width() + '" style="height: 25px; text-align: center;" colspan="6">没有数据</td></tr>');
			 }
			 else {
			 $('#dg').datagrid("selectRow", 0);
			 var selectRow=$('#dg').datagrid('getSelected');
			 getData(selectRow.deviceID,selectRow.sum_distance,selectRow.sum_fuel_consumption,selectRow.licenseNumber);
			 }
			 },
		 
			 onSelect: function(index,row){
	          //    alert("deviceID:"+row.deviceID);
	          //    alert("sum_distance:"+row.sum_distance);
	          //    alert("sum_fuel_consumption:"+row.sum_fuel_consumption);
	              getData(row.deviceID,row.sum_distance,row.sum_fuel_consumption,row.licenseNumber);
			}
		 
		 });
	     
   
      function getData(deviceID,sum_distance,sum_fuel_consumption,licenseNumber){
    	  $month=glob_startDate.substr(0,7);
		  
		  x1 = new Array();
		  x1[0]=40;
		  x1[1]=40;
    	  x_data = new Array();
    	  y_data = new Array();
    	  y_data1 = new Array();
    	  x_data[0]=$month;
    	  y_data[0]=sum_distance;
    	  y_data1[0]=sum_fuel_consumption;
    	
    	  require.config({
	            paths:{ 
	                'echarts' : 'http://echarts.baidu.com/build/echarts',
	                'echarts/chart/bar' : 'http://echarts.baidu.com/build/echarts'
	            }
	        });
		
                   // 使用
        require(
                          [
                              'echarts',
                              'echarts/chart/bar' // 使用柱状图就加载bar模块，按需加载
                          ],
                          function (ec) {
                              // 基于准备好的dom，初始化echarts图表
                              var myChart = ec.init(document.getElementById('main')); 
                              
                              option = {
                              	    title : {
                              	        text: '里程、油耗月统计('+licenseNumber+')：',
                              	        subtext: ''
                              	    },
                              	    tooltip : {
                              	        trigger: 'axis'
                              	    },
                              	    legend: {
                             	        data:['当月里程(KM)','当月油耗(L)']
                             	    },
                             	  
                             	//    calculable : true,
                              	    xAxis : [
                              	        {
                              	            type : 'category',
                              	            data : x_data
                              	        }
                              	    ],
                              	    yAxis : [
                              	        {
                              	            type : 'value',
                              	            axisLabel : {
                              	                formatter: '{value}'
                              	            }
                              	        }
                              	    ],
                              	    series : [
                              	        {
                              	            name:'当月里程(KM)',
                              	            type:'bar',
                              	            itemStyle: {
                                              normal: {
                                                  borderWidth: 6,
                                                  borderRadius:0,
                                                  label : {
                                                      show: true, position: 'insideTop'
                                                  }
                                              }
                                          },
                              	            data:y_data
                              	            
                              	        },
                              	      {
                              	            name:'当月油耗(L)',
                              	            type:'bar',
                              	            itemStyle: {
                                              normal: {
                                                  borderWidth: 6,
                                                  borderRadius:0,
                                                  label : {
                                                      show: true, position: 'insideTop'
                                                  }
                                              }
                                          },
                              	            data:y_data1
                              	        }
                              	    ]
                              	};
                      
                              // 为echarts对象加载数据 
                              myChart.setOption(option); 
                          }
                      ); 
     
                      
                      
        

    	  
        //		  });
        		  	  
    }
	</script>
		</body>
</html>